/* CSS Document */
*{
	margin:0px;
	padding:0;
}
body{
	background-size:cover;
	-webkit-background-size:cover;
	overflow:hidden;

}
.bg{
	position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;	
}

.Box{
	width:234px;
	height:234px;
	position:absolute;
	bottom:90px;
	right:0;
	left:0;
	margin:auto;
	perspective:1000px;/*视距*/
}
.Box .scene{
        transform-style:preserve-3D;/*子元素为3d模式*/
        width:240px;
        height:240px;
        transform-origin:50%;/* 设置旋转的中心点*/
        float:left; margin-right:60px;
        -webkit-animation:slide 18s linear infinite;
        animation:slide 18s linear infinite;
      }
.Box .scene ul li{
	list-style:none;
	width:200px;
	height:200px;
	border:5px solid #FE98D9;
	position:absolute;
}
.Box .scene ul li img{
	width:200px;
	height:200px;
}
.Box .scene ul li:nth-child(1){
	transform: rotateY(0deg) translateZ(260px);
}
.Box .scene ul li:nth-child(2){
	transform:rotateY(60deg) translateZ(260px);
}
.Box .scene ul li:nth-child(3){
	transform:rotateY(120deg) translateZ(260px);
}
.Box .scene ul li:nth-child(4){
	transform:rotateY(180deg) translateZ(260px);
}
.Box .scene ul li:nth-child(5){
	transform:rotateY(240deg) translateZ(260px);
}
.Box .scene ul li:nth-child(6){
	transform:rotateY(300deg) translateZ(260px);
}
/*动画开始*/
@keyframes slide {
	from{transform: rotateY(0deg);}
	to{transform:rotateY(360deg);}
}
@-webkit-keyframes slide {
	from{transform: rotateY(0deg);}
	to{transform:rotateY(360deg);}
}

.Box .scene:hover{
	animation-play-state: paused;
	-webkit-animation-play-state:paused;
}

.Box .scene li:hover img{
	transform:scale(1,2);
	border:5px solid rgba(255,255,255,0.5);
}
.xin{
	position:fixed;
	bottom:50px;
	left:60px;
	opacity:0;
	animation:xin 8s linear infinite;
	-webkit-animation:xin 8s  linear infinite;
}
@keyframes xin{
	0%(opacity:1)/*从什么时候开始*/
	20%{bottom:300px; left:300px; opacity:0;}
	40%{ bottom:460px; left:680px; opacity:1;}
	60%{bottom:300px; left:900px; opacity:0;}
	80%{bottom:50px; left:1100px; opacity:1};
	100%{bottom:-150px; left:760px; opacity:0;}
		
		
}
@-webkit-keyframes xin{
	0%(opacity:1)/*从什么时候开始*/
	20%{bottom:300px; left:300px; opacity:0;}
	40%{ bottom:460px; left:680px; opacity:1;}
	60%{bottom:300px; left:900px; opacity:0;}
	80%{bottom:50px; left:1100px; opacity:1};
	100%{bottom:-150px; left:760px; opacity:0;}
}
audio{
	display:none;
}